<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta charset="utf-8" />
<title>练耳</title>
<link rel="stylesheet" href="../../css/quiz.css">
</head>
<body>

<main id="quiz"></main>

<script src="../../js/ui.js"></script>
<script src="../../js/quiz.js"></script>
<!-- <script src="../../js/audio/resampler.js"></script> -->
<!-- <script src="../../js/audio/XAudioServer.js"></script> -->
<script src="../../js/player.js"></script>
<script>
const track = [
  { pitch: ['C4', 'E4', 'G4', 'B4'], time: 800 },
]
const player = new Player(function() {
  return track;
})

class EarQuiz extends Quiz {
  next () {
    return {
      question: '这是什么和弦? <button onclick="player.play()">&#128266;</button>',
      choices: [
        { label: 'C' },
        { label: '#C' },
        { label: 'Cmaj7', isAnswer: true },
        { label: 'C7' },
      ]
    }
  }

  onQuestionLoad () {
    player.play()
  }

  onMistake () {}
}

const quiz = new EarQuiz({
  el: $('#quiz'),
  uid: 'ear-training'
})
</script>
</body>
</html>
